<template>
  <div class="HistoryList">
    <div class="leftbox">
      <EnterpriseTree @handleClick="handleClick" ref="EnterpriseTreerefs"></EnterpriseTree>
    </div>
    <div class="rightbox">
      <div class="titlebox">
        <div class="title">{{ treeval.name }}</div>
        <div class="filter">
          <div>
            <span>时间:</span>
            <span class="radio">
              <el-radio-group v-model="form.radio3" size="small">
                <el-radio-button label="1">日</el-radio-button>
                <el-radio-button label="2">月</el-radio-button>
                <el-radio-button label="3">年</el-radio-button>
              </el-radio-group>
            </span>
            <span>
              <el-date-picker v-if="form.radio3==1" v-model="form.value1" type="date" value-format="yyyy-MM-dd" size="small" key="1" placeholder="选择日期"></el-date-picker>
              <el-date-picker v-else-if="form.radio3==2" v-model="form.value2" type="month" value-format="yyyy-MM" size="small" key="2" placeholder="选择月份"></el-date-picker>
              <el-date-picker v-else v-model="form.value3" type="year" value-format="yyyy" size="small" key="3" placeholder="选择年"></el-date-picker>
            </span>
          </div>
          <div>
            <el-button type="primary" size="small" @click="handleClick(treeval)">查 询</el-button>
            <el-button type="primary" size="small" plain @click="exportex">导 出</el-button>
          </div>
        </div>
      </div>
      <div class="bodybox">
        <el-tabs v-model="activeName" @tab-click="handleClick(treeval)" style="margin:0 10px;">
          <el-tab-pane label="电量" name="Electric" >
            <Electric :form="form" :treeval="treeval" ref="Electricrefs"></Electric>
          </el-tab-pane>
          <el-tab-pane label="负荷" name="Load" >
            <Load :form="form" :treeval="treeval" ref="Loadrefs"></Load>
          </el-tab-pane>
          <el-tab-pane label="电压" name="Voltage" >
            <Voltage :form="form" :treeval="treeval" ref="Voltagerefs"></Voltage>
          </el-tab-pane>
          <el-tab-pane label="电流" name="Current" >
            <Current :form="form" :treeval="treeval" ref="Currentrefs"></Current>
          </el-tab-pane>
          <el-tab-pane label="功率因数" name="Power" >
            <Power :form="form" :treeval="treeval" ref="Powerrefs"></Power>
          </el-tab-pane>
        </el-tabs>
        <!-- <div class="compo">
          <component :is="component" :form="form" :treeval="treeval" ref="featureRefs"></component>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import {exportexcel} from '@/utils/excel'
import { getKeywordListApi } from '@/api/Ledger'
import {getzongjianxianapi} from '@/api/monitor'
import EnterpriseTree from '@/components/EnterpriseTree'
import Electric from './Electric.vue'
import Current from './Current.vue'
import Load from './Load.vue'
import Power from './Power.vue'
import Voltage from './Voltage.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    Load,
    Power,
    Voltage,
    Current,
    Electric,
    EnterpriseTree
  },
  data() {
    return {
      treeval: {},
      form: {
        radio3: '1',
        value1: '',
        value2: '',
        value3: '',
      },
      component:'',
      activeName: 'Electric',
      num:0
    };
  },

  mounted() {
    this.gettime()
  },

  methods: {
    async handleClick(val) {
      this.treeval = val
      if(this.activeName=='Electric') this.$refs.Electricrefs.getchushi(val,this.form)
      if (this.activeName == 'Load') this.$refs.Loadrefs.getchushi(val, this.form)
      if (this.activeName == 'Power') this.$refs.Powerrefs.getchushi(val, this.form)
      if (this.activeName == 'Voltage') this.$refs.Voltagerefs.getchushi(val, this.form)
      if (this.activeName == 'Current') this.$refs.Currentrefs.getchushi(val, this.form)
    },
    // 首次加载根据用电单位获取其下面总进线间隔
    getzongjian() {
      
    },
    exportex() {
      const tag=this.activeName=='Electric'?'1':this.activeName=='Load'?'2':this.activeName=='Voltage'?'3':this.activeName=='Current'?'4':'5'
      const dateString=this.form.radio3=='1'?this.form.value1:this.form.radio3=='2'?this.form.value2:this.form.value3
      exportexcel('/pio-microservice-biz/pio/historical/data/analyse/data/analyse/exportExcel', {
        dateString, dateType: this.form.radio3, deviceId: this.treeval.id, tag
      },'历史数据')
    },
    // 获取当前时间戳
    gettime () {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() // 日
      this.form.value3 = year.toString()
      this.form.value2 = year + '-' + month
      this.form.value1 = year + '-' + month + '-' + day
    }
  },
};
</script>
<style lang="scss" scoped>
.HistoryList{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    padding: 10px;
    margin-right: 10px;
    background-color: #fff;
    height: 100%;
  }
  .rightbox{
    width: calc(100% - 310px);
    .titlebox{
      height: 110px;
      margin-bottom: 10px;
      padding: 20px 20px 0 20px;
      background-color: #fff;
      .title{
        font-size: 20px;
        font-weight: 600;
        color: #000;
        margin-bottom: 10px;
      }
      .filter{
        font-size: 14px;
        color: #606266;
        display: flex;
        justify-content: space-between;
        .radio{
          margin: 0 10px;
        }
      }
    }
    .bodybox{
      height: calc(100% - 120px);
      background-color: #fff;
      padding: 10px;
      .compo{
        height: 92%;
      }
    }
  }
}
::v-deep .el-tabs, .el-tab-pane{
  height: 100%;
}
::v-deep .el-tabs__content{
  height: 92%;
}
</style>